<template>
  <div>
    <label>
      <input type="checkbox" name="listItem" :checked="todo.completed" @change="check(todo.id)">
      <span>{{ todo.title }}</span>
    </label>
    <button @click="del(todo.id)">删除</button>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  props: ['todo', 'checkTodo', 'deleteTodo'],
  methods: {
    check(val) {
      this.checkTodo(val)
    },
    del(val) {
      if (confirm('确定删除吗？')) {
        this.deleteTodo(val)
      }
    }
  }
}
</script>